<template>
  <div class="slide_card_box">
    <div class="slide_card" ref="box" :style="{ width: Width + 'px' }">
      <div class="create" v-if="show">
        <div>
          <button>
            <el-icon size="20">
              <Plus />
            </el-icon>
          </button>
          <span>空白创建</span>
        </div>
        <img src="https://t7.baidu.com/it/u=655876807,3707807800&fm=193&f=GIF" alt="">
      </div>
      <div class="slide_item" @mouseover="item.showBox = true" @mouseout="item.showBox = false"
        v-for="(item, index) in list" :key="index">
        <ScrollImg v-if="item.label === '长页'" :img="item.img" />
        <SwiperImg v-else-if="item.label === '电子画册'" :img="item.img" />
        <SingleImg v-else :img="item.img" />
        <span class="label" v-show="!item.showBox">{{ item.label }}</span>
        <span class="right_of_use" v-show="item.showBox">{{ item.gratis }}</span>
        <div class="star" v-show="item.showBox" @click="collect(item)">
          <el-icon :size="20">
            <StarFilled :color="item.star ? 'orange' : '#ffffff'" />
          </el-icon>
        </div>
        <div class="itemBottom" v-show="item.showBox">
          <p class="text">{{ item.title }}</p>
          <dl>
            <dt>
              <img class="avatar" :src="item.avatar" alt="">
            </dt>
            <dd>{{ item.Name }}</dd>
          </dl>
          <el-icon>
            <View />
          </el-icon>
          <span>{{ item.Views }}</span>
        </div>
      </div>
      <div class="more">
        <button>
          <el-icon size="20">
            <Right />
          </el-icon>
        </button>
        <p>查看更多</p>
      </div>
    </div>
    <button v-show="leftShow" class="left" @click="gotoleft">
      <el-icon size="15" color="black">
        <ArrowLeft />
      </el-icon>
    </button>
    <button v-show="rightShow" class="right" @click="gotoright">
      <el-icon size="15" color="black">
        <ArrowRight />
      </el-icon>
    </button>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, toRefs } from 'vue';
import ScrollImg from './ScrollImg.vue'
import SwiperImg from './SwiperImg.vue'
import SingleImg from './SingleImg.vue';

const box = ref(null)
let tagDomObj: any = null
let newWidth = 0
let leftShow = ref(false)
let rightShow = ref(true)
let Width = ref(0)

const prors = defineProps({
  show: Boolean,
  list: Array,
  clicks:Function
})
const { show, list } = toRefs(prors)


onMounted(() => {
  // 获取dom节点对象
  tagDomObj = box.value;
})

setTimeout(() => {
  Width.value = (tagDomObj.children[0].clientWidth + 20) * (list.value.length + 1)
}, 200)

const abc = () => {
  if(prors.clicks) {
    prors.clicks()
  }
}

abc()

const gotoleft = () => {
  rightShow.value = true
  const minWidth = 0
  // 每次滑动的长度
  newWidth = newWidth - tagDomObj.children[0].clientWidth * 9
  if (newWidth <= minWidth) {
    newWidth = minWidth
    leftShow.value = false
  }
  const newScrollstup = newWidth
  // 使用平滑动画进行下一页
  tagDomObj.style.transform = `translateX(${-newScrollstup}px)`
}

const gotoright = () => {
  leftShow.value = true
  const maxWidth = tagDomObj.clientWidth - tagDomObj.children[0].clientWidth * 9
  newWidth = newWidth + tagDomObj.children[0].clientWidth * 9
  if (newWidth >= maxWidth) {
    newWidth = maxWidth
    rightShow.value = false
  }
  const newScrollstup = newWidth
  tagDomObj.style.transform = `translateX(${-newScrollstup}px)`
}

const collect = (obj: any) => {
  list.value.forEach((item: any, index: number) => {
    if (obj.id === item.id) {
      list.value[index].star = !list.value[index].star
    }
  })
}

</script>

<style scoped lang="scss">
.slide_card_box {
  width: 100%;
  height: 340px;
  overflow: hidden;
  position: relative;

  .slide_card {
    height: 280px;
    transition: transform 0.5s ease-out;
    margin-top: 20px;
    border-radius: 5px;

    .create {
      width: 185px;
      height: 280px;
      float: left;

      div {
        width: 185px;
        height: 155px;
        border: 1px solid #ccc;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        button {
          width: 50px;
          height: 50px;
          background: #1261ff;
          border-radius: 50%;
          border: none;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
        }



        span {
          margin-top: 20px;
          font-weight: bold;
        }
      }

      img {
        width: 185px;
        height: 100px;
        border-radius: 5px;
        margin-top: 25px;
      }
    }

    .slide_item {
      width: 185px;
      height: 280px;
      float: left;
      margin-left: 10px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      position: relative;

      .itemBottom {
        width: 100%;
        height: 60px;
        background: #fff;
        border: 1px solid #ccc;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        box-shadow: 3px 5px 10px 0px #ccc;

        .text {
          width: 185px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          float: left;
        }

        dl {
          width: 100px;
          height: auto;
          float: left;
          margin-top: -12px;
          margin-left: 5px;

          dt {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            float: left;

            img {
              width: 30px;
              height: 30px;
              border-radius: 50%;
            }
          }

          dd {
            float: left;
            margin-top: 5px;
            margin-left: 10px;
            font-size: 12px;
          }
        }

        .el-icon {
          margin-top: -4px;
          float: left;
          margin-left: 27px;
        }

        span {
          float: left;
          font-size: 12px;
          margin-top: -6px;
          margin-left: 5px;
        }
      }

      .label {
        color: #fff;
        background: rgba(0, 0, 0, .5);
        padding: 3px 5px 3px 5px;
        font-size: 12px;
        position: absolute;
        left: 5px;
        bottom: 10px;
        border-radius: 5px;
      }

      .right_of_use {
        color: #fff;
        background: rgba(0, 0, 0, .5);
        padding: 3px 5px 3px 5px;
        font-size: 12px;
        position: absolute;
        right: 5px;
        bottom: 10px;
        border-radius: 5px;
      }

      .star {
        background: rgba(0, 0, 0, .5);
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 5px;
        top: 10px;
      }

    }

    .slide_item:hover {
      transform: translateY(-23px);
      box-shadow: 3px 5px 10px 0px #ccc;
      transition: transform 0.3s ease-out;
    }

  }

  .more {
    width: 185px;
    height: 280px;
    float: left;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    button {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: #f5f7fb;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
    }

    p {
      margin-top: 20px;
      font-weight: bold;
    }
  }

  .left,
  .right {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
  }

  .left:hover,
  .right:hover {
    background: #1261ff;

    .el-icon {
      color: #fff;
    }
  }

  .left {
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
  }

  .right {
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
  }
}
</style>